<template>
  <div class="pet-app">
    <!-- 顶部导航 -->
    <header class="bg-primary text-white shadow-sm py-3">
      <div class="container">
        <div class="d-flex justify-content-between align-items-center">
          <div class="d-flex align-items-center">
            <span class="fs-4 me-2">🐾</span>
            <h1 class="h4 mb-0 fw-bold">我的宠物</h1>
            <span class="fs-4 ms-2">🐾</span>
          </div>
          <button class="btn btn-light text-primary" @click="logout">
            <i class="fas fa-sign-out-alt me-1"></i> 返回首页
          </button>
        </div>
      </div>
    </header>

    <main class="container my-4">
      <!-- 我的宠物 -->
      <section class="mb-5">
        <div class="d-flex justify-content-between align-items-center mb-4">
          <h2 class="h5 mb-0 text-primary">
            <i class="fas fa-paw me-2"></i>我的毛孩子们
          </h2>
          <button class="btn btn-primary" @click="showAddPetModal">
            <i class="fas fa-plus me-1"></i> 添加宠物
          </button>
        </div>
        
        <div class="row g-4">
          <!-- 宠物卡片 -->
          <div class="col-12" v-for="(pet, index) in pets" :key="index">
            <div class="card shadow-sm h-100 fixed-height-card" :class="{'hover-effect': hoverIndex === index}" @mouseenter="hoverIndex = index" @mouseleave="hoverIndex = null">
              <div class="row g-0 h-100">
                <!-- 图片在左侧 -->
                <div class="col-md-4">
                  <img 
                    :src="pet.image" 
                    alt="宠物照片" 
                    class="img-fluid rounded-start h-100 object-fit-cover"
                  >
                </div>
                <!-- 信息在右侧 -->
                <div class="col-md-8">
                  <div class="card-body h-100 d-flex flex-column">
                    <div class="flex-grow-1">
                      <div class="d-flex justify-content-between align-items-start mb-3">
                        <h3 class="h5 mb-0 text-primary">{{ pet.name }}</h3>
                        <div class="btn-group" role="group">
                          <button class="btn btn-sm btn-warning" @click="showEditPetModal(pet)">
                            <i class="fas fa-edit me-1"></i>编辑
                          </button>
                          <button class="btn btn-sm btn-danger" @click="confirmDeletePet(index)">
                            <i class="fas fa-trash-alt me-1"></i>删除
                          </button>
                        </div>
                      </div>
                      
                      <div class="d-flex flex-wrap gap-2 mb-3">
                        <span class="badge bg-info">
                          <i class="fas fa-venus-mars me-1"></i> {{ pet.gender }}
                        </span>
                        <span class="badge bg-secondary">
                          <i class="fas fa-birthday-cake me-1"></i> {{ pet.age }}岁
                        </span>
                        <span class="badge bg-success" v-if="pet.type">
                          <i class="fas fa-dog me-1" v-if="pet.type === '狗'"></i>
                          <i class="fas fa-cat me-1" v-else-if="pet.type === '猫'"></i>
                          <i class="fas fa-paw me-1" v-else></i>
                          {{ pet.type }}
                        </span>
                      </div>
                      
                      <div class="mb-3">
                        <p class="mb-1">
                          <i class="fas fa-heart text-danger me-2"></i>
                          <strong>兴趣爱好:</strong> {{ pet.hobbies }}
                        </p>
                        <p class="mb-0" v-if="pet.notes">
                          <i class="fas fa-sticky-note text-warning me-2"></i>
                          <strong>特别说明:</strong> {{ pet.notes }}
                        </p>
                      </div>
                    </div>
                    
                    <div class="pet-footer mt-auto pt-2 border-top">
                      <small class="text-muted">
                        <i class="fas fa-calendar-alt me-1"></i>
                        添加于: {{ pet.createdAt || '2023-01-01' }}
                      </small>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 添加宠物卡片 -->
          <div class="col-12">
            <div 
              class="card h-100 border-2 border-dashed hover-shadow text-center cursor-pointer" 
              @click="showAddPetModal"
            >
              <div class="card-body d-flex flex-column align-items-center justify-content-center py-5">
                <div class="bg-light rounded-circle d-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
                  <i class="fas fa-plus fs-4 text-primary"></i>
                </div>
                <h3 class="h5 text-primary mb-0">添加新成员</h3>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
    
    <!-- 页脚 -->
    <footer class="bg-dark text-white py-4 mt-5">
      <div class="container text-center">
        <p class="mb-0">© 2025 我的宠物 - 用爱记录每一刻</p>
      </div>
    </footer>

    <!-- 添加/编辑宠物模态框 -->
    <div class="modal fade" id="petModal" tabindex="-1" aria-hidden="true" ref="petModal">
      <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
          <div class="modal-header bg-primary text-white">
            <h5 class="modal-title">
              {{ modalMode === 'add' ? '添加新宠物' : '编辑宠物信息' }}
            </h5>
            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <form>
              <!-- 头像上传 -->
              <div class="mb-4 text-center">
                <div 
                  class="mx-auto mb-3 rounded-circle overflow-hidden position-relative" 
                  style="width: 120px; height: 120px; background-color: #f8f9fa; cursor: pointer;"
                  @click="triggerFileInput"
                >
                  <img 
                    v-if="currentPet.image" 
                    :src="currentPet.image" 
                    class="w-100 h-100 object-fit-cover"
                  >
                  <div 
                    v-else 
                    class="w-100 h-100 d-flex flex-column align-items-center justify-content-center text-muted"
                  >
                    <i class="fas fa-camera fs-3 mb-2"></i>
                    <small>点击上传</small>
                  </div>
                  <input 
                    type="file" 
                    ref="fileInput" 
                    @change="handleImageUpload" 
                    accept="image/*"
                    style="display: none"
                  >
                </div>
              </div>
              
              <div class="row g-3">
                <!-- 基本信息 -->
                <div class="col-md-6">
                  <label for="petName" class="form-label">名字</label>
                  <input 
                    type="text" 
                    class="form-control" 
                    id="petName" 
                    v-model="currentPet.name"
                    placeholder="宝贝的名字"
                    required
                  >
                </div>
                
                <div class="col-md-6">
                  <label for="petType" class="form-label">种类</label>
                  <select class="form-select" id="petType" v-model="currentPet.type" required>
                    <option value="">选择种类</option>
                    <option value="狗">狗狗</option>
                    <option value="猫">猫咪</option>
                    <option value="其他">其他</option>
                  </select>
                </div>
                
                <div class="col-md-4">
                  <label for="petAge" class="form-label">年龄</label>
                  <div class="input-group">
                    <input 
                      type="number" 
                      class="form-control" 
                      id="petAge" 
                      v-model="currentPet.age"
                      min="0"
                      placeholder="0"
                      required
                    >
                    <span class="input-group-text">岁</span>
                  </div>
                </div>
                
                <div class="col-md-4">
                  <label for="petGender" class="form-label">性别</label>
                  <select class="form-select" id="petGender" v-model="currentPet.gender" required>
                    <option value="公">公</option>
                    <option value="母">母</option>
                  </select>
                </div>
                
                <div class="col-md-4">
                  <label for="petWeight" class="form-label">体重</label>
                  <div class="input-group">
                    <input 
                      type="number" 
                      class="form-control" 
                      id="petWeight" 
                      v-model="currentPet.weight"
                      min="0"
                      step="0.1"
                      placeholder="0"
                    >
                    <span class="input-group-text">kg</span>
                  </div>
                </div>
                
                <!-- 兴趣爱好 -->
                <div class="col-12">
                  <label for="petHobbies" class="form-label">兴趣爱好</label>
                  <textarea 
                    class="form-control" 
                    id="petHobbies" 
                    v-model="currentPet.hobbies"
                    rows="2"
                    placeholder="例如：喜欢玩球、追尾巴、晒太阳..."
                  ></textarea>
                </div>
                
                <!-- 特别说明 -->
                <div class="col-12">
                  <label for="petNotes" class="form-label">特别说明</label>
                  <textarea 
                    class="form-control" 
                    id="petNotes" 
                    v-model="currentPet.notes"
                    rows="3"
                    placeholder="例如：对某些食物过敏、特殊习惯等..."
                  ></textarea>
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">取消</button>
            <button type="button" class="btn btn-primary" @click="savePet">
              {{ modalMode === 'add' ? '添加宠物' : '保存更改' }}
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 删除确认模态框 -->
    <div class="modal fade" id="deleteConfirmModal" tabindex="-1" aria-hidden="true" ref="deleteModal">
      <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
          <div class="modal-header bg-danger text-white">
            <h5 class="modal-title">确认删除</h5>
            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <p>确定要删除 <strong>{{ pets[petToDelete]?.name }}</strong> 的信息吗？这个操作无法撤销。</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">取消</button>
            <button type="button" class="btn btn-danger" @click="deletePet">确认删除</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Modal } from 'bootstrap';

export default {
  name: 'PetCenter',
  data() {
    return {
      pets: [
        {
          name: '贝贝',
          type: '狗',
          age: 2,
          gender: '公',
          hobbies: '喜欢玩球、追尾巴',
          notes: '对花生过敏',
          image: 'https://images.unsplash.com/photo-1586671267731-da2cf3ceeb80?w=300&auto=format',
          createdAt: '2023-05-15'
        },
        {
          name: '咪咪',
          type: '猫',
          age: 1,
          gender: '母',
          hobbies: '喜欢睡觉、晒太阳',
          notes: '害怕吹风机的声音',
          image: 'https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?w=300&auto=format',
          createdAt: '2023-08-20'
        }
      ],
      modalMode: 'add', // 'add' or 'edit'
      petToDelete: null,
      currentPet: this.getEmptyPet(),
      petModalInstance: null,
      deleteModalInstance: null,
      hoverIndex: null // 新增用于跟踪鼠标悬停的索引
    };
  },
  mounted() {
    this.petModalInstance = new Modal(this.$refs.petModal);
    this.deleteModalInstance = new Modal(this.$refs.deleteModal);
  },
  methods: {
    getEmptyPet() {
      return {
        name: '',
        type: '',
        age: '',
        gender: '公',
        weight: '',
        hobbies: '',
        notes: '',
        image: ''
      };
    },
    logout() {
      console.log('退出登录');
    },
    showAddPetModal() {
      this.modalMode = 'add';
      this.currentPet = this.getEmptyPet();
      this.petModalInstance.show();
    },
    showEditPetModal(pet) {
      this.modalMode = 'edit';
      this.currentPet = {...pet};
      this.petModalInstance.show();
    },
    savePet() {
      if (this.modalMode === 'add') {
        // 添加创建时间
        this.currentPet.createdAt = new Date().toISOString().split('T')[0];
        this.pets.push({...this.currentPet});
      } else {
        const index = this.pets.findIndex(p => p.name === this.currentPet.name);
        if (index !== -1) {
          this.pets.splice(index, 1, {...this.currentPet});
        }
      }
      this.petModalInstance.hide();
    },
    confirmDeletePet(index) {
      this.petToDelete = index;
      this.deleteModalInstance.show();
    },
    deletePet() {
      if (this.petToDelete !== null) {
        this.pets.splice(this.petToDelete, 1);
        this.petToDelete = null;
        this.deleteModalInstance.hide();
      }
    },
    triggerFileInput() {
      this.$refs.fileInput.click();
    },
    handleImageUpload(event) {
      const file = event.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = (e) => {
          this.currentPet.image = e.target.result;
        };
        reader.readAsDataURL(file);
      }
    }
  }
};
</script>

<style scoped>
/* 自定义样式补充 */
.object-fit-cover {
  object-fit: cover;
}

.cursor-pointer {
  cursor: pointer;
}

.hover-shadow:hover {
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;
}

.pet-footer {
  border-color: rgba(0, 0, 0, .1) !important;
}



/* 新增固定高度和鼠标悬停效果的样式 */
.fixed-height-card {
  height: 400px; /* 固定卡片高度 */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* 平滑过渡效果 */
}

.hover-effect {
  transform: scale(1.02); /* 鼠标悬停时稍微放大 */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* 鼠标悬停时的阴影效果 */
}

/* 动画效果 */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
  40% {transform: translateY(-10px);}
  60% {transform: translateY(-5px);}
}

/* 响应式调整 */
@media (max-width: 768px) {
  .card img {
    height: 200px !important;
  }
}
</style>